﻿@using TheoryOn.Mvc.Models;
@{
    ViewBag.Title = "Network Demo Page";
     
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                <a href="@Url.Action("AntecedentsConsequences")">Antecedents & Consequences</a>
                <a href="@Url.Action("Network")">Network</a>
            </p>
        </div>
    </section>
}


  <style type="text/css">
    body, select {
      font: 10pt sans;
    }
    #mynetwork {
      position:relative;
      width: 800px;
      height: 600px;
      border: 1px solid lightgray;
    }
    table.legend_table {
      font-size: 11px;
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
    }
    table.legend_table,td {
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
      padding: 2px;
    }
    div.table_content {
      width:80px;
      text-align:center;
    }
    div.table_description {
      width:100px;
    }
      #node-label,#node-id {
        width:200px;
      }
    #operation {
      font-size:28px;
    }
    #network-popUp {
      display:none;
      position:absolute;
      top:350px;
      left:470px;
      z-index:299;
      width:250px;
      height:160px;
      background-color: #f9f9f9;
      border-style:solid;
      border-width:3px;
      border-color: #5394ed;
      padding:10px;
      text-align: center;
    }
      .mask {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        z-index:100;
        background-color:gray;
      }
  </style>

<p>
  There are a lot of options with arrows! They can also be combined with dashed lines.
</p>

<div id="mynetwork"></div>
<div>
    <a class="save-as">save as</a>
</div>

<div id="network-popUp">
  <span id="operation">node</span> <br>
  <table style="margin:auto;"><tr>
    <td>id</td><td><input id="node-id" value="new value" /></td>
  </tr>
    <tr>
      <td>label</td><td><input id="node-label" value="new value" /></td>
    </tr></table>
  <input type="button" value="save" id="saveButton" />
  <input type="button" value="cancel" id="cancelButton" />
</div>

@section scripts{
<script type="text/javascript">
    $(function () {
        // create an array with nodes
        var nodes = new vis.DataSet([
          { id: 1, label: 'Node 1', color:"green" },
          { id: 2, label: 'Node 2', color: "green" },
          { id: 3, label: 'Node 3', color: "green" },
          { id: 4, label: 'Node 4', color: "green" },

          { id: 7, label: 'Node 7', color: "blue" },

          { id: 5, label: 'Node 5', color: "blue" },
          { id: 6, label: 'Node 6', color: "blue", x: 100, y: 100, fixed: true },
          { id: 8, label: 'Node 8', color: "blue", x: 400, y: 100, fixed: true },
          { id: 9, label: ' ', color: "blue", x: 250, y: 100, fixed: true, shape: 'triangle', size: 5 }
        ]);

        // create an array with edges
        var edges = new vis.DataSet([ 
          { from: 1, to: 3, arrows: 'to' },
          { from: 1, to: 2, arrows: 'to' },
          { from: 2, to: 4, arrows: 'to' },
          { from: 4, to: 1, arrows: 'to' },

          //{ from: 2, to: 5, arrows: 'to, middle, from' },
          {
              from: 6, to: 7, arrows: 'to'
          },

          { from: 5, to: 9, arrows: 'to' },
          {
              from: 8, to: 9,  
              arrows: {
                  to: false,
              },
              smooth: {
                  enabled: false,
              },
          },
          {
              from: 9, to: 6, 
              arrows: {
                  from: false,
                  to: true,
              },
              smooth: {
                  enabled: false,
              },
          }
        ]);

        // create a network
        var container = document.getElementById('mynetwork');
        var seed = 2;
        var data = {
            nodes: nodes,
            edges: edges,
            event: event
        };
        var options = {
            layout: { randomSeed: seed }, // just to make sure the layout is the same when refresh
            manipulation: {
                //addNode: function (data, callback) {
                //    return;
                //    // filling in the popup DOM elements
                //    $('#operation').html("Add Node");
                //    $('#node-id').val(data.id);
                //    $('#node-label').val(data.label);
                //    $('#saveButton').click(function () { saveData.bind(this, data, callback); });
                //    $('#cancelButton').click(function () { clearPopUp.bind(); });
                //    $('#network-popUp').show();
                //    $('#node-id').closest("tr").hide();
                //},
                addNode: false,
                editNode: function (data, callback) {
                    // filling in the popup DOM elements   
                    $('#operation').html("Edit Node");
                    $('#node-id').val(data.id);
                    $('#node-label').val(data.label);
                    $('#saveButton').click(function () {
                        data.id = document.getElementById('node-id').value;
                        data.label = document.getElementById('node-label').value;
                        clearPopUp();
                        initializeDataForChange(data);
                        callback(data);
                    });
                    $('#cancelButton').click(function () {
                        clearPopUp();
                        callback(null);
                    });
                    $('#saveButton').show();
                    $('#network-popUp').show();
                    $('#node-label').closest("tr").show();
                    $('#node-id').closest("tr").hide();
                },
                addEdge: function (data, callback) {
                    if (data.from == data.to) {
                        var r = confirm("Do you want to connect the node to itself?");
                        if (r == true) {
                            initializeDataForChange(data);
                            callback(data);
                        }
                    }
                    else {
                        initializeDataForChange(data);
                        callback(data);
                    }
                }
            }
        }; 
        var network = new vis.Network(container, data, options);

        network.on("doubleClick", function (params) {
            params.event = "[original event]";
            if (params.nodes.length == 1) {
                var data = params.nodes.pop();
                $('#operation').html("Review Node Detail");
                $('#node-id').val(data);  
                $('#cancelButton').click(function () {
                    clearPopUp();
                });
                $('#saveButton').hide();
                $('#network-popUp').show();
                $('#node-id').attr("disabled", "disabled").closest("tr").show();
                $('#node-label').closest("tr").hide();
            }
        });

        function initializeDataForChange(data) {
            data.color = "red";
        }
        function clearPopUp() {
            document.getElementById('saveButton').onclick = null;
            document.getElementById('cancelButton').onclick = null;
            document.getElementById('network-popUp').style.display = 'none';
        }

        $(".save-as").click(function () {
            var canvas = $("#mynetwork").find("canvas")[0];
            var img = canvas.toDataURL("image/png");
            //var w = window.open('about:blank', 'image from canvas');
            //w.document.write("<img src='" + img + "' alt='from canvas'/>");

            var MIME_TYPE = "image/png";
            this.download = "test.png";
            this.href = img;

            //this.dataset.downloadurl = [MIME_TYPE, this.download, this.href].join(':');
            //document.write('<img src="' + img + '"/>');
        });
    });
</script>
}
